<template>
  <div class="main-todo">
    <input type="text" class="add-todo" placeholder="请添加事项" autofocus v-model="content" @keyup.enter="addTodo">
    <todo-item v-for="(item,index) of filterList" :key="index" :info="item" @del="headleDelItem"></todo-item>
    <todo-info @filderItem="filderItem" :total="total" @clearFinish="clearFinish"></todo-info>
  </div>
</template>
<script>
  import TodoItem from "./coms/TodoItem.vue";
  import TodoInfo from "./coms/TodoInfo.vue";

  let id = 0;
  export default {
    name: "MainTodo",
    data() {
      return {
        content: "",
        list: [],
        filter: "全部事项",
        total: 0,
      };
    },
    methods: {
      addTodo() {
        if (this.content == "") return;
        this.list.unshift({
          id: id++,
          text: this.content,
          completed: false,
        });
        console.log("this.list :>> ", this.list);
        this.content = "";
      },
      headleDelItem(id) {
        // console.log(id);
        this.list.splice(this.list.findIndex(item => item.id === id), 1);
      },
      filderItem(item) {
        this.filter = item;
      },
      clearFinish() {
        this.list = this.list.filter(item => {
          return item.completed == false;
        });
      },
    },
    watch: {
      list: {
        deep: true,
        handler() {
          this.total = this.list.filter(item => {
            return item.completed == false;
          }).length;
        },
      },
    },
    computed: {
      filterList() {
        switch (this.filter) {
          //["全部事项", "已完成", "待完成"],
          case "全部事项":
            return this.list;
            break;
          case "已完成":
            return this.list.filter(item => {
              return item.completed == false;
            });
            break;
          case "待完成":
            return this.list.filter(item => {
              return item.completed == true;
            });
            break;
        }
      },
    },
    components: {
      TodoItem,
      TodoInfo,
    },
  };
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'

  .main-todo
    margin 0 auto
    width 600px
    background-color #fff
    box-shadow 0 0 5px #666

    .add-todo
      padding 16px 16px 16px 36px
      width 100%
      font-size 30px
      line-height 30px
      font-weight inherit
      color inherit
      box-sizing border-box
      cleanDefaultStyle()
</style>


